import React from 'react';
import { Tabs } from 'antd';
import { connect, routerRedux } from 'dva';
import _ from 'lodash';
const { TabPane } = Tabs;

/**
 * 工作台通过tab 来控制 多个路由 用一个div
 */
@connect(({ tabController, menuCountM }) => ({
  tabController,
  menuCountM,
}))
export default class WorkStationContent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: null,
      panes: [],
    };
    this.query = {};
  }

  UNSAFE_componentWillMount() {
    const { activePath, myTabs } = this.props;
    const panes = myTabs;
    let arr = panes.filter((item) => item.key == activePath);
    this.setState({ activeKey: arr.length ? activePath : panes[0].key, panes });
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { activePath } = nextProps;
    let panes = this.state.panes;
    let arr = panes.filter((item) => item.key == activePath);
    this.setState({ activeKey: arr.length ? activePath : panes[0].key });
  }

  componentDidMount() {}
  componentWillUnmount() {}

  // tab页切换事件
  onChange = (activeKey) => {
    console.log(activeKey);
    this.setState({
      activeKey,
    });
    this.props.dispatch(routerRedux.push(`${activeKey}`));
  };

  render() {
    const { match } = this.props;
    const { activeKey, panes } = this.state;

    return (
      <>
        <div style={{ marginTop: '-60px' }}>
          <Tabs hideAdd onChange={this.onChange} activeKey={activeKey} type='editable-card'>
            {panes.map((pane) => {
              return (
                <TabPane closable={false} tab={pane.name} key={pane.key}>
                  <pane.component {...pane.props} pageStatus={this.props.pageStatus} location={this.props.location} nowKey={activeKey === `${pane.key}`} match={this.props.match} />
                </TabPane>
              );
            })}
          </Tabs>
        </div>
      </>
    );
  }
}
